<template>
  <div>
    <el-dialog v-model="fileDialog" width="75vw" :append-to-body="true" :close-on-click-modal="false" @close="visibleDialogClose" destroy-on-close>
      <template #title>
        <div class="title_box">
          <div class="title1">知识管理</div>
          <el-divider direction="vertical"></el-divider>
          <div class="title2">企业</div>
        </div>
      </template>
      <div class="file_detail_box">
        <div class="left">
          <div class="title_name">
            <div class="title_name_one">
              <svg-icon icon-class="network-fill" />
              <span>文件名称</span>
            </div>
            <div class="title_name_two">
              <span>{{ fileDetailInfo.realName ? fileDetailInfo.realName : '' }}</span>
              <span>{{ fileDetailInfo.suffix ? '.' + fileDetailInfo.suffix : '' }}</span>
            </div>
          </div>
          <div class="tabsBox" v-if="visibleDialog">
            <el-tabs ref="tabsBoxRefs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane name="history" v-if="fileDetailInfo.type == 'file'">
                <template #label>
                  <span>
                    <svg-icon icon-class="history" />
                    历史版本
                  </span>
                </template>
              </el-tab-pane>
              <el-tab-pane name="downloads">
                <template #label>
                  <span>
                    <svg-icon icon-class="downloads" />
                    下载记录
                  </span>
                </template>
              </el-tab-pane>
              <!-- <el-tab-pane name="look" v-if="fileDetailInfo.type == 'file'">
                <template #label>
                  <span>
                    <svg-icon icon-class="eye" />
                    查看记录
                  </span>
                </template>
              </el-tab-pane>
              <el-tab-pane name="printing" v-if="fileDetailInfo.type == 'file'">
                <template #label>
                  <span>
                    <svg-icon icon-class="eye" />
                    打印记录
                  </span>
                </template>
              </el-tab-pane> -->
              <!-- 历史版本 -->
              <div v-show="activeName == 'history'">
                <history-list ref="HistoryListRefs" :fileDetailInfo="fileDetailInfo" :roleList=roleList></history-list>
              </div>
              <!-- 下载记录 -->
              <div v-show="activeName == 'downloads'">
                <download-list ref="downloadListRefs"></download-list>
              </div>
              <!-- 查看记录 -->
              <div v-show="activeName == 'look'">
                <look-list ref="lookListRefs" :fileDetailInfo="fileDetailInfo"></look-list>
              </div>
              <!-- 打印记录 -->
              <div v-show="activeName == 'printing'">
                <!-- <printing ref="printing"></printing> -->
              </div>
            </el-tabs>
          </div>
          <!-- 描述 -->
          <div class="titleText">描述</div>
          <div v-if="isInputBox" class="describeBox" @click="InputBox_openClick">
            <span class="describeText">
              {{ fileDetailInfo.remarks ? fileDetailInfo.remarks : '无' }}
            </span>
          </div>
          <div v-else>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="inputString"> </el-input>
            <div class="describeBox_btn create_box">
              <el-button @click="InputBox_cancelClick">取 消</el-button>
              <el-button @click="InputBox_confirmClick" type="primary">确 定</el-button>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="right">
          <div class="thumbnailBox">
            <div class="thumbnailBox_title">
              <i class="el-icon-picture-outline"></i>
              <span>缩略图</span>
            </div>
            <div class="imgBox">
              <img v-if="fileDetailInfo.thumbnailUrl" :src="proxy.$yuUtils.changePageImgPath(fileDetailInfo.thumbnailUrl)" alt="" />
              <svg-icon v-else :icon-class="proxy.$yuUtils.selectSvgIcon(fileDetailInfo)" style="font-size: 40px"></svg-icon>
            </div>
            <!-- 下载和更多 -->
            <div class="thumbnailBox_btnBox">
              <el-button class="btnclass" :disabled="judgePermission('download')" @click="downloadFileFunc">
                <svg-icon icon-class="download" />
              </el-button>
              <!-- 更多 -->
              <MoreList ref="moreListRefs" :rowItem="fileDetailInfo" :isSlot="true" @moreHandleCommand="moreHandleCommand" :rowData="rowData">
                <el-button class="btnclass">更多<svg-icon icon-class="mores" /></el-button>
              </MoreList>
            </div>
          </div>
          <!-- 基本信息 -->
          <div class="essential_info">
            <div class="title_box">
              <svg-icon icon-class="info3"></svg-icon>
              <span>基本信息</span>
            </div>
            <div class="essential_content">
              <el-row class="titleText" :gutter="20">
                <el-col :span="6" class="title1">路径</el-col>
                <el-col :span="18" class="title2">{{ fileDetailInfo.path }}</el-col>
              </el-row>
              <el-row class="titleText" :gutter="20">
                <el-col :span="6" class="title1">文件大小</el-col>
                <el-col :span="18" class="title3">{{ fileDetailInfo.size }}</el-col>
              </el-row>
              <el-row class="titleText" :gutter="20">
                <el-col :span="6" class="title1">创建时间</el-col>
                <el-col :span="18" class="title3">{{ fileDetailInfo.createTime }}</el-col>
              </el-row>
              <el-row class="titleText" :gutter="20">
                <el-col :span="6" class="title1">更新时间</el-col>
                <el-col :span="18" class="title3">{{ fileDetailInfo.updateTime }}</el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
     
<script setup lang='ts'>
import { ref } from 'vue';
import { apiEnterpriseFilesTreeUpdateRemarks } from '@/api/enterpriseDoc/enterpriseDocApi';
import { enterpriseRole } from '@/store/modules/enterpriseRole';
const roleStore = enterpriseRole();
import { useEnterpriseDocStore } from '@/store/modules/enterpriseDoc';
const docStore = useEnterpriseDocStore();
const rowData: any = ref(docStore.row); // 获取父组件传递过来的数据
// 自定义组件
import MoreList from '@/views/enterpriseDoc/component/enterpriseDoc//more-list.vue'; // 表格更多操作
import HistoryList from '@/views/enterpriseDoc/component/enterpriseDoc/history-list.vue'; // 历史版本
import DownloadList from '@/views/enterpriseDoc/component/enterpriseDoc/download-list.vue'; // 历史版本
import LookList from '@/views/enterpriseDoc/component/enterpriseDoc/look-list.vue'; // 查看记录
const { proxy } = getCurrentInstance() as any;
const fileDialog = ref<boolean>(false); // 文件对话框状态
const fileDetailInfo = ref<any>({}); // 文件详情信息
const emit: any = defineEmits(['fileDetailAll_moreHandleCommand']);
const isInputBox = ref<boolean>(true); // 描述输入框状态
const visibleDialog = ref<boolean>(true); // 显示对话框状态
const activeName = ref<string>('downloads'); // 选项卡名称
const downloadListRefs = ref<any>(); // 下载记录组件
const HistoryListRefs = ref<any>(); // 历史版本组件
const handleClick = (tab: any, event: any) => {
  if (tab.props.name == 'history') {
    HistoryListRefs.value.apiOnlineSelectFilesVersions();
  }
  if (tab.props.name == 'downloads') {
    downloadListRefs.value.getList(fileDetailInfo.value);
  }
}; // 选项卡点击事件
const InputBox_openClick = () => {
  isInputBox.value = false;
};
const inputString = ref<string>(''); // 描述输入框内容
// 描述输入框取消
const InputBox_cancelClick = () => {
  isInputBox.value = true;
  inputString.value = '';
};
// 描述输入框确认
const InputBox_confirmClick = async () => {
  let res: any = await apiEnterpriseFilesTreeUpdateRemarks({
    id: fileDetailInfo.value.id,
    remarks: inputString.value
  });
  if (res.code == 200) {
    fileDetailInfo.value.remarks = inputString.value;
    proxy.$modal.msgSuccess('保存成功');
  }
  isInputBox.value = true;
};
// 关闭对话框
const visibleDialogClose = () => {
  fileDialog.value = false;
};
const roleList = ref<any[]>([]); // 权限列表
// 获取详情
const getFileInfo = async (row: any, name: string) => {
  fileDialog.value = true;
  fileDetailInfo.value = row;
  roleStore.getEnteroriseFileRole(row);
  roleList.value = roleStore.enterpriseMyRoleList;
  if (name) {
    nextTick(()=>{
      activeName.value = name;
      HistoryListRefs.value.apiOnlineSelectFilesVersions();
    })
  } else {
    nextTick(() => {
      activeName.value = 'downloads';
      downloadListRefs.value.getList(row);
    });
  }
};
/**权限控制 */
const judgePermission = (str) => {
  return !proxy.$yuUtils.documentsPermissionFunc([str], roleList.value);
};
/**下载 */
const downloadFileFunc = async () => {
  if (fileDetailInfo.value.type != 'file') {
    await proxy?.$download.downloadFile([fileDetailInfo.value.id], fileDetailInfo.value.libraryType);
    // pageLoading.value = false;
    return;
  }
  // proxy.$modal.msgSuccess('正在创建,请稍后...');
  proxy?.$download.downloadFile([fileDetailInfo.value.id], fileDetailInfo.value.libraryType);
};
// 更多
const moreHandleCommand = (command: any, item: any) => {
  emit('fileDetailAll_moreHandleCommand', command, item);
};
defineExpose({
  fileDialog,
  fileDetailInfo,
  getFileInfo
});
</script>
<style lang="scss" scoped>
.titleText {
  font-size: 14px;
  color: #5f6e8e;
  line-height: 22px;
  font-weight: 400;
  margin: 8px 0;
}

:deep(.el-dialog) {
  margin: 0 auto; //为什么这么写,这么写才生效,才不会出现弹窗滚动效果
  margin-top: 5vh !important;
}
:deep(.el-dialog__body) {
  padding: 10px 20px;
}
.file_detail_box {
  height: calc(100vh - 250px);
  // overflow-y: auto;
  width: 100%;
  display: flex;
  .right {
    width: 400px;
    min-width: 400px;
    padding: 20px;
  }
  .left {
    width: calc(100% - 400px);
    overflow-x: auto;
    white-space: nowrap;
    border-right: 1px solid #e0e2e4;
    padding-right: 20px;
    padding-bottom: 20px;
    .title_name {
      margin-bottom: 5px;
      .title_name_one {
        display: flex;
        align-items: center;
        color: #9d9d9d;
        margin-bottom: 6px;
        font-size: 14px;
        span {
          margin-left: 8px;
        }
      }
      .title_name_two {
        margin-top: 8px;
        font-size: 18px;
        color: #3d3d3d;
      }
    }
  }
}
.title_box {
  font-size: 13px;
  display: flex;
  align-items: center;
  .title1 {
    color: #5f6e8e;
    font-size: 15px;
  }
  .title2 {
    background-color: #e5ecfa;
    color: #5f6e8e;
    padding: 4px 6px 2px;
    border-radius: 2px;
    font-weight: bold;
  }
}
.tabsBox {
  min-width: 500px;
  // max-height: 500px;
  // overflow: auto;
  :deep(.el-tabs__item.is-active) {
    color: #6698ff;
  }
  :deep(.el-tabs__item:hover) {
    color: #6698ff;
  }
  :deep(.el-tabs__active-bar) {
    background-color: #6698ff;
  }
  :deep(.el-tabs__item) {
    color: #9d9d9d;
  }
}
.create_box {
  :deep(.el-button--mini) {
    padding: 5px 10px;
  }
  :deep(.el-button--text) {
    padding: 9px 15px;
    color: #aaa;
  }
  :deep(.el-button--text:hover) {
    color: #6698ff;
  }
  :deep(.el-button--primary) {
    background-color: #6698ff;
    border-color: #6698ff;
  }
  :deep(.el-button--primary:focus) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }
  :deep(.el-button--primary:hover) {
    box-shadow: 0 2px 5px 1px rgba(102, 152, 255, 0.6);
  }
}
.labelBox {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  .labelBox_tags {
    display: flex;
    flex-wrap: wrap;
  }
  .el-tag {
    margin: 0 5px 10px;
  }
}
.describeBox {
  width: 100%;
  .describeText {
    color: #cacaca;
    cursor: pointer;
    white-space: pre-wrap;
  }
}
.describeBox_btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}
.thumbnailBox {
  .thumbnailBox_title {
    color: #9d9d9d;
    font-size: 15px;
    margin-bottom: 8px;
  }
  .imgBox {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e2e4;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .thumbnailBox_btnBox {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    .btnclass {
      margin-left: 10px;
      &:hover {
        background-color: #6698ff;
        color: #fff;
        border-color: #6698ff;
      }
    }
    .btnclass.is-disabled:hover {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #e6ebf5;
    }
  }
}
.essential_info {
  margin-top: 30px;
  .title_box {
    color: #9d9d9d;
    font-size: 15px;
    margin-bottom: 15px;
    span {
      margin-left: 5px;
    }
  }
  .essential_content {
    .titleText {
      font-size: 14px;
      color: #666;
    }
    .title2 {
      color: #999999;
    }
    .title3 {
      color: #3d3d3d;
    }
  }
}
.comment_box {
  margin-top: 30px;
  // overflow-y: scroll;
  // overflow-x: hidden;
  // height: 400px;
  height: calc(100% - 300px);
  // border: 1px solid red;
  .title_box {
    color: #9d9d9d;
    font-size: 15px;
    margin-bottom: 15px;
    span {
      margin-left: 5px;
    }
  }
}
</style>
